import { mapState } from 'vuex'
export default {
  data () {
    return {
      jcdpLayersLoaded: false,
      maskLayerId: 'ysqjcdp_mask',
      areaLayerId: 'ysqjcdp_area',
      areaWkt: null,
      maskWkt: null
    }
  },
  computed: {
    ...mapState('map', ['initLayerZIndexMap'])
  },
  methods: {
    // 创建边界蒙层
    async calculateBoundary () {
      const layers = await this.$mapManager.invoke('addLayers', [{
        bklayerId: this.maskLayerId,
        bklayerType: 'vectorlayer',
        bklayerName: '蒙层',
        bklayerSn: this.initLayerZIndexMap[this.maskLayerId],
        isClick: false,
        visible: true
      }])
      const maskLayer = layers[0]
      maskLayer && maskLayer.getSource().clear()
      const data = await this.$request.post('/ysjc/ztt/selectKjdxs', {
        XZQDMS: '130000',
        CODES: ''
      })
      this.maskWkt = data.KJDX
      const extent = window.turf.bboxPolygon([-180, -90, 180, 90])
      const feature = await this.$mapManager.invoke('transfromFeature', this.maskWkt)
      const geoJson = this.$mapManager.getMapComponent().map1.bkol.feature2GeoJson(feature)
      const resultFeature = this.$mapManager.getMapComponent().map1.bkol.geoJson2feature(
        window.turf.difference(extent, geoJson)
      )
      console.log({ resultFeature })
      resultFeature.setStyle(new window.ol.style.Style({
        fill: new window.ol.style.Fill({ color: '#0000003d' }),
        stroke: new window.ol.style.Stroke({ color: '#003064', width: 1 })
      }))
      maskLayer.getSource().addFeature(resultFeature)
    },
    async createLayers () {
      // 恢复到全貌
      setTimeout(() => {
        this.$mapManager.invoke('setZoom', 'quanmao')
      }, 200)
      const layers = this.mapLegends.map(item => ({
        bklayerGroupId: item.groupName,
        bklayerId: item.layerId,
        bklayerName: item.name,
        bklayerType: 'vectorlayer_empty',
        bklayerSn: this.initLayerZIndexMap[item.layerId],
        // clusterSn: this.initLayerZIndexMap[item.layerId + '_cluster'],
        visible: item.visible ?? true,
        needCluster: item.needCluster ?? false,
        hasText: item.hasText ?? false,
        textKey: item.textKey,
        isClick: item.isClick ?? false,
        isHover: item.isHover ?? false,
        declutter: true
      }))
      await this.$mapManager.invoke('addLayers', layers)
      // const allLayers = this.$mapManager.getMapComponent().map1.getLayers().array_
      // const allIds = this.$mapManager.getMapComponent().map1.layerManager.getAllLayer()
      // console.log({ allIds, allLayers })
      this.jcdpLayersLoaded = true
    },
    async clearLayerById (layerId) {
      const layer = await this.$mapManager.invokeUtils('getLayer', layerId)
      if (layer) {
        layer.getSource().clear()
        if (layer.get('hasCluster')) {
          const clusterLayer = await this.$mapManager.invokeUtils('getLayer', layerId + '_cluster')
          // 聚合图层需要get两次
          if (clusterLayer) {
            clusterLayer.getSource().getSource().clear()
          }
        }
      } else {
        console.error('图层' + layerId + '不存在')
      }
    },
    clearAllLayers () {
      this.$mapManager.invoke('clearSelectStyle')
      this.legends.forEach(item => {
        this.clearLayerById(item.layerId)
      })
    },
    // 可点击下钻图层
    async createDrillDownClickLayer () {
      const layers = await this.$mapManager.invoke('addLayers', [{
        bklayerId: this.areaLayerId,
        bklayerType: 'vectorlayer',
        bklayerName: '行政区划',
        bklayerSn: this.initLayerZIndexMap[this.areaLayerId],
        isClick: true,
        visible: true
      }, {
        bklayerId: this.maskLayerId,
        bklayerType: 'vectorlayer',
        bklayerName: '蒙层',
        bklayerSn: this.initLayerZIndexMap[this.maskLayerId],
        isClick: false,
        visible: true
      }])
      const areaLayer = layers[0]
      areaLayer && areaLayer.getSource().clear()
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        metaSet: 'YSQJC_JC_XZQ',
        methodCode: 'get_kjdxLists',
        methodParams: {
          XZQDMS: '130100,130200,130300,130400,130500,130600,130700,130800,130900,131000,131100'
        }
      })
      const features = []
      for (const row of rows) {
        const resultFeature = await this.$mapManager.invoke('transfromFeature', row.KJDX)
        resultFeature.setProperties(Object.assign({
          layerId: this.areaLayerId,
          maskLayerId: this.maskLayerId,
          isHighLight: false,
          XZQDM: row.XZQDM,
          XZQMC: row.XZQMC
        }))
        // resultFeature.setStyle(new window.ol.style.Style({
        //   fill: new window.ol.style.Fill({ color: '#154cc233' }),
        //   stroke: new window.ol.style.Stroke({ color: '#003064', width: 1 })
        // }))
        features.push(resultFeature)
      }
      // console.log({ rows, features })
      areaLayer.getSource().addFeatures(features)
    }

  }
}
